---
title: Benutzerdefiniertes Design
description: Erstellen eines benutzerdefinierten Designs
---

# Benutzerdefiniertes Design

## Erstellen eines benutzerdefinierten Designs

> Hinweis: Diese API ist instabil und wird sich wahrscheinlich in naher Zukunft ändern. Es wird empfohlen, vorerst die [integrierten Designs](/docs/theming) zu verwenden.

Während die integrierten Designs ein gewisses Maß an Anpassung bieten, wird der `Theme`-Typ bereitgestellt, um Ihnen zu helfen, Ihre eigenen benutzerdefinierten Designs mit einem niedrigerem Zugriff auf die zugrunde liegenden Designvariablen zu definieren.

```tsx
import { RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit';

const myCustomTheme: Theme = {
  blurs: {
    modalOverlay: '...',
  },
  colors: {
    accentColor: '...',
    accentColorForeground: '...',
    actionButtonBorder: '...',
    actionButtonBorderMobile: '...',
    actionButtonSecondaryBackground: '...',
    closeButton: '...',
    closeButtonBackground: '...',
    connectButtonBackground: '...',
    connectButtonBackgroundError: '...',
    connectButtonInnerBackground: '...',
    connectButtonText: '...',
    connectButtonTextError: '...',
    connectionIndicator: '...',
    downloadBottomCardBackground: '...',
    downloadTopCardBackground: '...',
    error: '...',
    generalBorder: '...',
    generalBorderDim: '...',
    menuItemBackground: '...',
    modalBackdrop: '...',
    modalBackground: '...',
    modalBorder: '...',
    modalText: '...',
    modalTextDim: '...',
    modalTextSecondary: '...',
    profileAction: '...',
    profileActionHover: '...',
    profileForeground: '...',
    selectedOptionBorder: '...',
    standby: '...',
  },
  fonts: {
    body: '...',
  },
  radii: {
    actionButton: '...',
    connectButton: '...',
    menuButton: '...',
    modal: '...',
    modalMobile: '...',
  },
  shadows: {
    connectButton: '...',
    dialog: '...',
    profileDetailsAction: '...',
    selectedOption: '...',
    selectedWallet: '...',
    walletLogo: '...',
  },
};

const App = () => (
  <RainbowKitProvider theme={myCustomTheme} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>;
)
```

### Erweitern eines integrierten Designs

Sie können ein integriertes Design erweitern, ohne das gesamte Design neu definieren zu müssen. Dies ist nützlich, wenn Sie nur bestimmte Design-Token überschreiben möchten.

Um dies zu tun, installieren Sie `lodash.merge` (oder Ähnliches):

```bash
npm install lodash.merge
```

Importieren Sie es zusammen mit dem Design, das Sie erweitern möchten (z. B. `darkTheme`) und dem `Theme`-Typ von TypeScript:

```tsx
import merge from 'lodash.merge';
import {
  RainbowKitProvider,
  darkTheme,
  Theme,
} from '@rainbow-me/rainbowkit';
```

Dann kombinieren Sie das integrierte Design mit den Design-Token, die Sie überschreiben möchten. In diesem Beispiel überschreibe ich das `accentColor`-Token, um es an die Akzentfarbe meiner Marke anzupassen.

```tsx
const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);
```

Schließlich können Sie jetzt Ihr benutzerdefiniertes Design an die `theme`-Eigenschaft des `RainbowKitProvider` übergeben.

```tsx
const App = () => {
  return (
    <RainbowKitProvider theme={myTheme} {...etc}>
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### Erstellen von benutzerdefinierten Design-Selektoren

Wenn Ihre App server-/statisch gerendert ist und es den Benutzern ermöglicht, manuell zwischen Designs umzuschalten, kann das Designsystem von RainbowKit mit benutzerdefinierten CSS-Selektoren verbunden werden, mit den folgenden Funktionen, die mit jedem CSS-in-JS-System verwendet werden können:

- `cssStringFromTheme`
- `cssObjectFromTheme`

Diese Funktionen liefern CSS, das alle erforderlichen Designvariablen setzt. Da sowohl Zeichenfolgen als auch Objekte unterstützt werden, kann dies in jedes CSS-in-JS-System integriert werden.

Als einfaches Beispiel können Sie Ihr eigenes `style`-Element mit benutzerdefinierten Selektoren für jedes Design rendern. Da wir die Kontrolle über das Rendern des Design-CSS übernehmen, übergeben wir `null` an die `theme`-Eigenschaft, damit `RainbowKitProvider` keine Stile für uns rendert. Beachten Sie auch die Verwendung der extends-Option bei der Funktion cssStringFromTheme, die alle Designvariablen, die mit dem Basisthema übereinstimmen, ausschließt.

```tsx
import {
  RainbowKitProvider,
  cssStringFromTheme,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider theme={null} {...etc}>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            :root {
              ${cssStringFromTheme(lightTheme)}
            }

            html[data-dark] {
              ${cssStringFromTheme(darkTheme, {
                extends: lightTheme,
              })}
            }
          `,
        }}
      />

      {/* ... */}
    </RainbowKitProvider>
  );
};
```
